<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets" template="/template.xhtml"
	xmlns:pretty="http://ocpsoft.com/prettyfaces"
	xmlns:p="http://primefaces.prime.com.tr/ui">

	<ui:define name="style">
		<link rel="stylesheet" type="text/css" href="Css/StyleHome.css" />
	</ui:define>

	<ui:define name="pageTitle">
			Home - TransitoJP - Transito de João Pessoa em tempo real.
		</ui:define>

	<ui:define name="header">
		<!-- Inicio da div Logo -->
		<div class="logo">
			<h:graphicImage url="/Images/logotmp.png" style="border:none;" />
		</div>
		<div>
			<h:form>
				<h:commandLink action="#{userBean.logout}" value="Logout" />
			</h:form>
		</div>
		
		<!-- Fim da div Logo -->
	</ui:define>

	<ui:define name="content">
		<!-- Inicio da div box1 -->
		<div class="box1">
			<p:tabView>
				<p:tab title="TransitoJP">
					<h:panelGrid columns="2" cellpadding="10">
						<h:outputText
							value="O Projeto tem como objetivo específico adquirir conhecimento prático 
							para realizar as atividades do desenvolvimento de software voltado para dispositivos móveis, permitindo
							assim, maior crescimento profissional e pessoal." />
					</h:panelGrid>
				</p:tab>

				<p:tab title="Transito agora">
					<h:panelGrid columns="2" cellpadding="10">
						<h:outputText value="Mapa Atual" />
					</h:panelGrid>
				</p:tab>

			</p:tabView>

		</div>
		<!-- Fim da div box1 -->

		<!-- Inicio da div box2 -->
		<div class="box2">
			<script src="http://widgets.twimg.com/j/2/widget.js"></script>
			<script>
new TWTR.Widget({
 version: 2,
  type: 'profile',
  rpp: 4,
  interval: 6000,
  width: 250,
  height: 200,
  theme: {
    shell: {
      background: '#384285',
      color: '#ffffff'
    },
    tweets: {
      background: '#ffffff',
      color: '#000000',
      links: '#004ca8'
    }
  },
  features: {
    scrollbar: false,
    loop: false,
    live: false,
    hashtags: true,
    timestamp: true,
    avatars: false,
    behavior: 'all'
  }
}).render().setUser('leiSecaJP').start();
</script>

		</div>
		<!-- Fim da div box2 -->
	</ui:define>

	<ui:define name="footer">
		<h:graphicImage url="/Images/logoYuppi.jpg" class="imgFooter" />
		<h:outputText value="©2011. Todos os direitos reservados."
			class="txtFooter1"></h:outputText>
		<h:outputText value="by: Rharon Maia" class="txtFooter2"></h:outputText>
	</ui:define>
</ui:composition>